import React, { PureComponent } from 'react'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import css from './index.module.scss'
import defaultAvatar from '@/assets/images/default-avatar.png'
class Header extends PureComponent {
    toHome = () => {
        this.props.history.push('/')
    }
    toSearch = () => {
        this.props.history.push('/search')
    }
    render() {
        return (
            <div className={`${css['header-wrap']} ${this.props.headerVisible ? css['active'] : ''}`}>
                <span className={css['header-logo']} onClick={this.toHome}>
                    <i className="fa fa-logo"></i>
                </span> 
                <div className={css['header-aside']}>
                    <span className={css['header-search']} onClick={this.toSearch}><i className="fa fa-search"></i></span>
                    <span className={css['header-mine']}><img src={defaultAvatar} alt="我的"/></span>
                </div>
            </div>
        )
    }
}

export default withRouter(connect(
    // 映射全局状态到当前UI
    state => ({ headerVisible: state.headerVisible })
)(Header))